<template>
  <div class="app-container">

    <el-form ref="form" :model="form" :rules="rules" label-width="150px" label-position="left">

      <el-row>
        <el-table ref="tables1" :data="form.ucQuoProjects" :row-key="row => row.id">

          <el-table-column label="序号" align="center" prop="indexNo"/>
          <el-table-column label="指标类型" align="center" prop="quotaType" width="100">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.quota_type" :value="scope.row.quotaType"/>
            </template>
          </el-table-column>
          <el-table-column label="项目" align="center" prop="name" width="200"/>
          <el-table-column label="明细" align="center" prop="ucQuoProjectItems" width="700">
            <template slot-scope="scope">
              <el-row type="flex" align="middle" v-if="scope.row.chooseType ==1" >

                <el-col :span="3">
                  {{scope.row.ucQuoProjectItems[0].score + '分'}}<br/>
                  {{scope.row.ucQuoProjectItems[0].limitMax}}
                  <dict-tag :options="dict.type.limit_type" :value="scope.row.ucQuoProjectItems[0].limitType" style="display: inline-block"/>
                </el-col>
                <el-col :span="16" style="text-align: left;">
                  <el-form-item label="" label-width="0px" :prop="'ucQuoProjects['+scope.$index+'].ucQuoProjectItems[0].content'"
                                :rules="{required: true,message: '请填写说明',trigger: 'blur',}"
                                v-if="scope.row.ucQuoProjectItems[0].scoreText>0">
                    <el-input type="textarea" v-model="scope.row.ucQuoProjectItems[0].content" placeholder=""></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="" label-width="0px" :prop="'ucQuoProjects['+scope.$index+'].ucQuoProjectItems[0].score'"
                                :rules="{required: true,message: '请填写分数',trigger: 'blur',}">
                    <el-input-number :min="0" :max="scope.row.ucQuoProjectItems[0].score" :precision="0" size="small" placeholder="分数" v-model="scope.row.ucQuoProjectItems[0].scoreText"
                                     :disabled="scope.row.ucQuoProjectItems[0].quotaFrom == 10"></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row v-if="scope.row.chooseType ==2 ||scope.row.chooseType ==3">
                <el-col :span="24" v-for="(ucQuoProjectItem,index) in scope.row.ucQuoProjectItems" :key="'b'+ucQuoProjectItem.id">
                  <el-col :span="3" style="text-align: center;">
                    {{ucQuoProjectItem.score + '分'}}<br/>
                    {{ucQuoProjectItem.limitMax}}
                    <dict-tag :options="dict.type.limit_type" :value="ucQuoProjectItem.limitType"  style="display: inline-block"/>
                  </el-col>
                  <el-col :span="16" style="text-align: left;">
                    {{ucQuoProjectItem.indexStr + ' ' +ucQuoProjectItem.name}}
                  </el-col>

                  <el-col :span="5">
                    <el-form-item label="" label-width="0px" :prop="'ucQuoProjects['+scope.$index+'].ucQuoProjectItems['+index+'].num'"
                                  :rules="{required: true,message: '请填写申请次数',trigger: 'blur',}">
                      <el-input-number :min="0" :max="ucQuoProjectItem.numCanApply" :precision="0" size="small" placeholder="次数" v-model="ucQuoProjectItem.num"
                                       :disabled="ucQuoProjectItem.quotaFrom == 10"></el-input-number>
                    </el-form-item>
                  </el-col>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <el-table-column label="说明" align="center" prop="content" width="500"/>
        </el-table>

      </el-row>

      <div style="height: 30px;"></div>
      <el-row>
        <el-col :span="24">
          <el-form-item label="附件" prop="imgList">
            <MyImageUploadCommit
              ref="myImageUploadCommit"
              @fileHandle="fileHandle"
              @fileDeleteHandle="fileDeleteHandle"
              :path-list="imgInit.imgList"
              :action-url="`/common/upload`"
            ></MyImageUploadCommit>
          </el-form-item>

        </el-col>

      </el-row>

      <div style="height: 60px;"></div>
      <el-row class="fixed-button">
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </el-row>


    </el-form>



  </div>
</template>
<script>
import MyImageUploadCommit from "@/components/MyFileUpload/MyImageUploadCommit";
export default {
  name : "PoiManagementAdd",
  components: {
    MyImageUploadCommit,
  },
  dicts: [
    'quota_type','choose_type','limit_type'
  ],

  data() {
    return {
      baseUrl:process.env.VUE_APP_BASE_API,
      imgInit:{
        imgList:[],
      },
      userId:0,
      form:{
        id:0,
        userId:0,
        tableId:0,
        ucQuoProjects:[],
        imgList:[],
      },
      rules:{

      },

    }
  },
  created() {
    let userId = this.$route.params && this.$route.params.userId;
    this.userId = userId;
    this.form.userId = userId;
    this.searchApplyByUser(userId);
  },
  methods: {
    searchApplyByUser(userId) {
      this.request({
        url: `/points/poiManagement/searchApplyByUser/${userId}`,
        method: 'get',
      }).then(response => {
        if(response && response.data){
          this.form = response.data
          this.imgInit.imgList = this.form.imgList;
          this.form.userId = this.userId
        } else {
          this.$message.error("错误!")
          let obj = { path: "/points/poiManagement" };
          this.$tab.closeOpenPage(obj);
        }
      });
    },

    submitForm: function() {
      let ucQuoProjectItemList =[]
      this.form.ucQuoProjects.forEach(ucQuoProject => {
        ucQuoProject.ucQuoProjectItems.forEach(ucQuoProjectItem =>{
          if(ucQuoProject.chooseType != 1 && ucQuoProjectItem.num > 0 || ucQuoProject.chooseType == 1 && ucQuoProjectItem.scoreText > 0){
            ucQuoProjectItemList.push(ucQuoProjectItem)
          }
        })
      })
      console.log(this.form.ucQuoProjects)
      console.log(ucQuoProjectItemList)
      if(ucQuoProjectItemList && ucQuoProjectItemList.length > 0){
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.request({
              url: '/points/poiManagement/add',
              method: 'post',
              data: this.form
            }).then(response => {
              this.$modal.msgSuccess("提交成功");
              let obj = { path: "/points/poiManagement" };
              this.$tab.closeOpenPage(obj);
            });
          }
        });
      }else{
        this.$modal.msgError("请选择项目");
      }

    },

    fileHandle(pathList){
      this.form.imgList=pathList;
    },
    fileDeleteHandle(pathList){
      this.form.imgList=pathList;
    },
  }
}
</script>
<style scoped>
.font-bolder {
  font-weight: bolder;
  color: #1890ff;
}

.el-input[type="text"] {
  width: 80%;
}

.el-cascader {
  width: 80%;
}
.fixed-button{
  position: fixed;
  bottom: 20px;
  right: 20px;
}

</style>



